<template>
	<div class="all">
		<div class="name hei da">请选择套餐</div>
		<div class="con">
			<van-radio-group v-model="radio">
				<van-cell-group>
					<van-cell :title="item.title" clickable @click="radio = item.id" v-for="item in list.list" :key="item.id">
						<template #right-icon>
							<van-radio :name="item.id" />
						</template>
					</van-cell>
				</van-cell-group>
			</van-radio-group>
		</div>
		
		<van-popup v-model="ing">
			<van-loading size="24px" color="#fff" vertical>加载中...</van-loading>
		</van-popup>
		
		<div :class="ke?'k2 btn':'k2 btn btn2'" @click="genggai">确定</div>
		<div class="red l1">* 更换套餐须知</div>

		<div class="hei l2"> 1、套餐有效期为：当月27日0点至次月26日24点；</div>
		<div class="hei l2"> 2、每个周期可更改一次套餐，改套餐后将于下个有效期生效； </div>
		<!-- <div class="hei l2"> 3. 套餐每月只能更改一次。</div> -->

	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import bus from '@/assets/bus.js'
	export default {
		name: 'gaitaocan',
		components: {
			top
		},
		data() {
			return {
				value: "",
				ke: true,
				radio: '',
				list: "",
				ing: true,
				isclick:true
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			this.gettaocan()
			
		},
		methods: {
			gettaocan: function() {
				this.axios.get(this.url + `/mobile/api/findPackageWithIccidOther?iccid=` + this.$route.query.canshu)
					.then(response => {
						if(response.data.success == true){
							this.list = response.data.result
							this.radio = response.data.result.list[0].id
							this.ing = false
						}else{
							this.$toast(response.data.message);
							this.ing = false
						}
					})
			},
			genggai: function() {
				var that = this
				if(this.isclick){
					this.isclick=false
					this.axios.post(this.url + `/mobile/api/changePackage?package_id=${this.radio}&iccid=` + this.$route.query.canshu)
					.then(response => {
						if(response.data.code==300){
							//吊起支付
							this.axios.post(this.url + `/mobile/api/wechatPay?price=` + response.data.result + `&title=续费&iccid=${this.$route.query.canshu}&package_id=${this.radio}&is_pre=2`)
								.then(response3 => {
									WeixinJSBridge.invoke(
										'getBrandWCPayRequest', {
										"appId": response3.data.result.appId,
										'timeStamp': response3.data.result.timeStamp,
										'nonceStr': response3.data.result.nonceStr,
										'package': response3.data.result.package,
										'signType': "MD5",
										'paySign': response3.data.result.paySign,
									},
										function (res) {
											if (res.err_msg == "get_brand_wcpay_request:ok") {
												that.$toast('绑定成功！正在跳转首页');
												setTimeout(function(){
													that.$router.push('/')
												},2000)
											} else {
												that.$router.push('/')
											}
										});
								})
						}else{
							if(response.data.success == true){
								this.$toast('已更改');
								setTimeout(() => {
									this.$router.push('/')
								},1000)
							}else{
								this.$toast(response.data.message);
							}
						}
						// if(response.data.success == true){
						// 	this.$toast('已更改');
						// 	setTimeout(() => {
						// 		this.$router.push('/')
						// 	},1000)
						// }else{
						// 	this.$toast(response.data.message);
						// }
					})
				}
				
			},
			
		},

	}
</script>

<style scoped lang="less">
	.all {
		background: #FFFFFF;
		font-size: 0.28rem;
		min-height: 100vh;
		.van-popup{ background: transparent;}
		.van-loading__text{ color: #FFFFFF;}
		.name {
			font-weight: bold;
		}

		.van-cell {
			padding: 0.3rem 0;
		}

		.con {
			margin-top: 20px;
		}

		.k2 {
			margin: 0.6rem 0;
		}

		.btn2 {
			background: #EDEDED !important;
			color: #A9A9A9 !important;
		}

		.l1 {
			color: #FF6367;
			font-size: 0.28rem;
			margin-bottom: 0.2rem;
		}

		.l2 {
			margin-bottom: 0.1rem;
		}

		.van-cell:not(:last-child)::after {
			left: 0;
		}
	}
</style>
